<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Projet DeViNT'2010 - Specifications</title>
<link href="css/base.css" type="text/css" rel="stylesheet" />
</head>
<body>
	<p class="start_links">
    	Vous &ecirc;tes ici : <a href="index.html">Accueil</a> - <a href="specifications.html">Spécifications</a><br/>
    	<a href="#sommaire">Aller directement au contenu</a>
    </p>
    <div class="banner">
        <a href="http://devint.polytech.unice.fr/">
        	<img height="58" src="images/logoDeViNT.gif" alt="logo DeViNT" />
        </a>
        <h1>
        	'2010
            D&eacute;ficients Visuels et Nouvelles Technologies : Accessibilit&eacute; &agrave; la lecture
        </h1>
    </div>
    <div class="wrapper">
        <div class="menu"> 
            <ul>
                <li><a href="sujet.html">Sujet</a></li>
                <li><a class="current" href="specifications.html">Sp&eacute;cifications</a></li>
                <li><a href="scenario.html">Scenario</a></li>
                <li><a href="bilan.html">Bilan</a></li>
                <li><a href="contacts.html">Contacts</a></li>
                <li><a href="documents.html">Documents <br/>- Sources</a></li>
            </ul>
        </div>
        <div class="sommaire">
        	<h1>Sommaire</h1>
            <br/>
            <a name="sommaire"></a>
            <ol>
                <li>
                	<a href="#partie1">Fonctionnalit&eacute;s</a>
                    <ol>
                    	<li><a href="#partie1_1">Encyclopédie</a></li>
               		 	<li><a href="#partie1_2">Dictionnaire</a></li>
                		<li><a href="#partie1_3">Actualités</a></li>
                    </ol>
                </li>
                <li>
                	<a href="#partie2">II. R&eacute;alisation</a>
                    <ol>
                    	<li><a href="#partie2_1">Structure globale</a></li>
                    	<li><a href="#partie2_2">Structure de Wikipédia</a></li>
                        <li><a href="#partie2_3">Structure de Wikctionnaire</a></li>
                        <li><a href="#partie2_4">Structure de Wikinews</a></li>
                    </ol>
                
                <li><a href="#partie3">Moyens</a></li>
            </ol>
        </div>
        <div class="contenu">
        	<h1>I. Fonctionnalit&eacute;s</h1>
            <p>
                <a name="partie1"></a>
            	<h2>Encyclopédie</h2>
                <p>
                    <a name="partie1_1"></a>
                    Le site restructurera l'information de l'encyclop&eacute;die Wikipedia de manni&egrave;re mieux structur&eacute;e et mieux adapté
                    à l'accessibilit&eacute; aux d&eacute;ficients visuels.<br />
                    Nous reprendrons l'organisation actuelle d'un article avec
                    <ul>
                        <li>L'ent&ecirc;te introductif de l'article</li>
                        <li>Le sommaire de l'article</li>
                        <li>Le contenu de l'article</li>
                    </ul>
                </p>
                <h2>Dictionnaire</h2> 
                <p>
                    <a name="partie1_2"></a>
                    Le <a href="http://fr.wiktionary.org/wiki/Wiktionnaire:Page_d%27accueil">Wiktionnaire</a> propose non seulement les définitions, mais aussi des renvois lexicaux ou thématiques, un dictionnaire de rimes, des expressions et locutions, des statistiques linguistiques et des annexes diverses couvrant divers aspects grammaticaux ou lexicaux des langues traitées.<br/>
                    Exemple : <a href="http://fr.wiktionary.org/wiki/libre">Définition du mot libre</a><br/>
                    On observe diverses informations :
                    <ul>
                    	<li>L'éthymologie</li>
                        <li>La définition</li>
                        <li>Les synonymes</li>
                        <li>Les expressions</li>
                        <li>Les traductions</li>
                        <li>Les prononciations</li>
                        <li>Les anagrammes</li>
                        <li>Des définitions dans d'autres langues.</li>
                    </ul>
                    Ces types d'information apparaissent dans plusieurs langues et sont variables d'une page à une autre, en fonction du publieur de l'article.
                    Toutes ces informations seront reprises.<br/>
                    Nous traiterons seulement la recherche d'un mot et l'accès au contenu. Les autres fonctionnalités comme la navigation par portail, l'accès aux discussions et la possibilité de contribuer au wiktionnaire ne seront pas traitées pour le moment.
                </p>
                <h2>Actualités</h2>
                <p>
                    <a name="partie1_3"></a>
                    Comme pour la partie encyclopédie, la partie news reprendra toutes les informations de maniére mieux structurée et mieux adapté
                    à l'accessibilit&eacute; aux d&eacute;ficients visuels.<br />
					Nous reprendrons donc les points suivants:
					<ul>
						<li>La partie "À la une"</li>
						<li>Les "Dernières nouvelles"</li>
						<li>La partie archives</li>
					</ul>
                </p>
            </p>
			<h1>II. R&eacute;alisation</h1>
            <p>
            	<a name="partie2"></a>
                Pour l'analyse et les choix des processus à mettre en oeuvre, nous nous baserons sur les recommandations du W.A.I (Web Accessibility Initiative) qui a pour but de rendre accessible le contenu web aux personnes handicapées, que leur handicap soit la cécité, la basse vision, la surdité, ou dû à des déficiences cognitives. Ces directives s'orientent autour de trois concepts : 
                <ul>
                	<li>Perceivable
                    	<ul>
                        	<li>Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
                            </li>
                            <li>Provide alternatives for time-based media.</li>
                            <li>Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
                            </li>
                            <li>Make it easier for users to see and hear content including separating foreground from background.</li>
                        </ul>
                     </li>
                     <li>Operable
                     	<ul>
                        	<li>Make all functionality available from a keyboard.</li>
                            <li>Provide users enough time to read and use content.</li>
                            <li>Do not design content in a way that is known to cause seizures.</li>
                            <li>Provide ways to help users navigate, find content, and determine where they are.</li>
                        </ul>
                     </li>
                     <li>Understandable
                     	<ul>
                        	<li>Make text content readable and understandable.</li>
                            <li>Make Web pages appear and operate in predictable ways.</li>
                            <li>Help users avoid and correct mistakes.</li>
                        </ul>
                     </li>
                     <li>Robust
                     	<ul>
                        	<li>Maximize compatibility with current and future user agents, including assistive technologies.</li>
                        </ul>
                     </li>
                </ul>
                La robustesse est évaluée grâce aux outils qu'utilisent les déficients visuels :
                <ul>
                	<li>Lecteurs d'écran
                    	<ul>
                        	<li>Permettre aux utilisateur de passer les menus et d'accéder directement au contenu</li>
                        	<li>Utilisation d'un structure de titre de paragraphe</li>
                            <li>Rendre compréhensible la lecture de tableau</li>
                        </ul>
                    </li>
                    <li>Agrandisseurs d'écran
                    	<ul>
                    		<li>Codez la mise en page en pourcentages plutôt qu’en unités de valeur absolue.</li>
                    	</ul>
                    </li>
                    <li>Paramétrage de contraste
                    
                    </li>
                </ul>
                Dans un premier temps nous allons fournir une structure globale de notre site conforme à ces recommandations puis nous analyserons ces points pour chaque fonctionnalité.
                <h2>Structure globale de l'application</h2>
                <p>
                	<a name="partie2_1"></a>
                    <ul>
                        <li>Structure générale de cadre de la page</li>
                        <li>Lien "accéder directement au contenu"</li>
                        <li>Tailles et positions relatives</li>
                        <li>Lien soulignés</li>
                    </ul>
                </p>
                <h2>Structure de Wikipédia</h2>
                <p>
                    <a name="partie2_2"></a>
                	Etant donnée la création dynamique des pages du système wikimédia on peut imaginer un système de récupération des données correspondant aux articles, par exemple en parsant les pages XHTML.
					En effet, comme les pages sont créées dynamiquement la structure XHTML de chaque page est identique. Il existe un bloc de donnée (div) identifié comme bodyContent qui contient l'ensemble des informations relative aux articles.
					Le travail concernant les articles sera donc la mise en place de la récupération du bodyContent et le traitement des informations internes à ce bloc.

					Le problème qui se pose est la suppression ou le remplacement des informations concernant la mise en page sur Wikipedia qui deviendront obsolète une fois le contenu retranscrit sur notre site accessible. Il faudra donc supprimer ses informations afin de les remplacer par les notres pour obtenir une page entierement linéarisable. 
					De plus les structures de tableaux posent un problème quand au passage par lecteur d'écran, il est donc nécessaire de trouver un moyen de remplacement, on peut imaginer une séparation par bloc (div) ou encore une suppression des tableaux afin de les transformer en textes simples.

					Pour la phase traitant du parsing de la page XHTML il existe un outils : PHP Simple HTML DOM Parser, qui permet de réaliser cette opération, ainsi la récupération de contenu XHTML sera aisée.
					Il faudra enfin penser à la gestion des liens présents dans les pages car ils sont trop nombreux et donc diminue la compréhension du texte lors de l'utilisation d'un lecteur d'écran, on peut imaginer déplacer les liens en fin de phrase ou de paragraphe dans un bloc div utilisé spécialement pour les liens, ce qui permettra ainsi à l'utilisateur de sauter le bloc si il ne désire pas connaitre les liens. 
                </p>
                <h2>Structure de Wictionnaire</h2>
                <p>
                    <a name="partie2_3"></a>
                    <h3>Identifications préalables</h3>
                    <p>
                        <h4>Page non linéarisée</h4>
                        <!--<iframe src="pages/wiktionnaire.html" width="90%" height="600" scrolling="auto" frameborder="1" name="exemple de recherche sur wictionnaire" > 
                            <p>Votre navigateur ne prend pas en charge les frame</p>
                        </iframe>-->
                        <br/>
                        <h4>Page linéarisée avec désactivation des css</h4>
                        <!--<iframe src="pages/wiktionnaire_linearisee_css.html" width="90%" height="600" scrolling="auto" frameborder="1" name="linéarisation de la précédente page">
                            <p>Votre navigateur ne prend pas en charge les frame</p>
                        </iframe>-->
                        <p>
                        	Après linéarisation de la page, on observe que globalement le contenu de la page qui nous interesse est stable hormis les tableaux, qui devront être reformatés. De nouvelles informations qui étaient cachées apparaissent et devront donc être traitées. Il apparait dans le sommaire une numérotation complète des listes imbriquées. Ce sommaire fera l'objet d'une analyse plus loin. Enfin on observe également que certaines images n'ont pas d'alternative textuelle (attribut alt), elles devront également être analysées.
                            
                        </p>
                        <h4>&Eacute;léments à supprimer</h4>
                        <p>
                            <ul>
                                <li>Liens stables concernant les fonctionnalités non traitées.
                                    <ul>Exemples :
                                        <li>En début de page : "Il existe une page Discuter:libre/fusion daf, avec laquelle cette page doit être fusionnée, voir ici pour plus d’informations."</li>
                                    </ul>
                                </li>
                                <li>Liens redondants.
                                    <ul>Exemple : 
                                        <li>Dans la partie "voir aussi" : <a href="http://fr.wikipedia.org/wiki/Libre">libre</a> sur Wikipédia <a href="http://fr.wikipedia.org/wiki/Libre">Article sur Wikipédia</a>
                                        </li>
                                    </ul>
                                    Pour cela, nous adopterons le principe suivant : si deux liens situés dans le même paragraphe référencent la même page, le dernier lien sera supprimé (transformé en simple texte).
                                </li>
                                <li>Informations stables redondantes
                                    <ul>Exemples : 
                                        <li>En début de page : "Définition, traduction, prononciation, anagramme et synonyme sur le dictionnaire libre Wiktionnaire."</li>
                                    </ul>
                                </li>
                                <li>Les liens qui n'ont pas de veritables destinations
                                    <ul>Exemples : 
                                        <li>Liens stables "masquer"</li>
                                        <li>Liens saisis par le publieur qui référence une page inexistante</li>
                                    </ul>
                                </li>
                                <li>Les images véhiculant une information redondante.
                                    <ul>Exemples : 
                                        <li>
                                            Devant le titre de définition "Adjectif" :<br />
                                            <img src="pages/wiktionnaire_fichiers/30px-Nuvola_apps_bookcase.png" alt="Image représentant une pile de livres."/>
                                            Cette image est attachée au sens de "dictionnaire" ou "définition" ce qui véhicule ici une information redondante.
                                        </li>
                                        <li>
                                            Devant le titre "&Eacute;thymologie : <br />
                                            <img src="pages/wiktionnaire_fichiers/30px-Open_book_01.png" alt="Image représentant vieux livre, un manuscrit."/>
                                            Cette image est attachée au sens de "histoire", "origine" donc "éthymologie" ce qui véhicule aussi une information redondante.
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </p>
                    </p>
                    <h3>Titre du document</h3>
                    <p>
                    	libre - Wiktionnaire
                        Ce titre sera repris.
                    </p>
                    <h3>Structure de titre</h3>
                    <p>
                        <ul>
                        	<li>
                            	&lt;h1&gt;libre&lt;&frasl;h1&gt;
                                <ul>
                                	<li>&lt;h2&gt;Sommaire&lt;&frasl;h2&gt;</li>
                            		<li>
                                		&lt;h2&gt;Français&lt;&frasl;h2&gt;
                                		<ul>
                                    		<li>&lt;h3&gt;&Eacute;thymologie&lt;&frasl;h3&gt;</li>
                            				<li>
                                            	&lt;h3&gt;Adjectif&lt;&frasl;h3&gt;
                                            	<ul>
                                                	<li>&lt;h4&gt;Synonymes&lt;&frasl;h4&gt;</li>
                                                    <li>&lt;h4&gt;Expressions&lt;&frasl;h4&gt;</li>
                                                    <li>&lt;h4&gt;Traductions&lt;&frasl;h4&gt;</li> 
                                                 </ul>   
                                            </li>
                                            <li>&lt;h3&gt;Prononciation&lt;&frasl;h3&gt;</li>
                                            <li>&lt;h3&gt;Anagrammes&lt;&frasl;h3&gt;</li>
                                            <li>&lt;h3&gt;Voir aussi&lt;&frasl;h3&gt;</li>
                                            <li>&lt;h3&gt;Références&lt;&frasl;h3&gt;</li>
                                    	</ul>
                                	</li>
                                    <li>
                                    &lt;h2&gt;Espagnol&lt;&frasl;h2&gt;
                                		<ul>
                                    		<li>&lt;h3&gt;&Eacute;thymologie&lt;&frasl;h3&gt;</li>
                                            <li>&lt;h3&gt;Nom commun&lt;&frasl;h3&gt;</li>
                                        </ul>
                                    </li>
                                    <li>
                                    &lt;h2&gt;Occitan&lt;&frasl;h2&gt;
                                		<ul>
                                    		<li>&lt;h3&gt;&Eacute;thymologie&lt;&frasl;h3&gt;</li>
                                            <li>&lt;h3&gt;Nom commun&lt;&frasl;h3&gt;</li>
                                        </ul>
                                    </li>
                               </ul>
                            </li>
                        </ul>
                    	
                        Ce que l'on peut remarquer ici est que le sens accordé à cette structure n'est pas conforme à l'utilisation des titres de paragraphe. Une hierarchie complete de titre devrait être accordée à l'article en lui-même et le reste distingués par des cadres.
                        La structure de titre adoptée sera remaniée de la manière suivante :
                        <ul>
                        	<li>
                                &lt;h1&gt;Français&lt;&frasl;h1&gt;
                                <ul>
                                    <li>&lt;h2&gt;&Eacute;thymologie&lt;&frasl;h2&gt;</li>
                                    <li>
                                        &lt;h2&gt;Adjectif&lt;&frasl;h2&gt;
                                        <ul>
                                            <li>&lt;h3&gt;Synonymes&lt;&frasl;h3&gt;</li>
                                            <li>&lt;h3&gt;Expressions&lt;&frasl;h3&gt;</li>
                                            <li>&lt;h3&gt;Traductions&lt;&frasl;h3&gt;</li>
                                        </ul>    
                                    </li>
                                    <li>&lt;h2&gt;Prononciation&lt;&frasl;h2&gt;</li>
                                    <li>&lt;h2&gt;Anagrammes&lt;&frasl;h2&gt;</li>
                                    <li>&lt;h2&gt;Voir aussi&lt;&frasl;h2&gt;</li>
                                    <li>&lt;h2&gt;Références&lt;&frasl;h2&gt;</li>
                                </ul>
                            </li>
                            <li>
                            	&lt;h1&gt;Espagnol&lt;&frasl;h1&gt;
                                <ul>
                                	<li>&lt;h2&gt;&Eacute;thymologie&lt;&frasl;h2&gt;</li>
                                    <li>&lt;h2&gt;Nom commun&lt;&frasl;h2&gt;</li>
                            	</ul>
                            </li>
                            <li>
                            	&lt;h1&gt;Occitan&lt;&frasl;h1&gt;
                            	<ul>
                                	<li>&lt;h2&gt;&Eacute;thymologie&lt;&frasl;h2&gt;</li>
                                	<li>&lt;h2&gt;Nom commun&lt;&frasl;h2&gt;</li>
                                </ul>
                            </li>
                        </ul>
                    </p>
                    <h3>Structure de cadre</h3>
                    <p>
                    	Notre page Wikctionnaire comportera les zones suivantes : 
                        <ul>
                        	<li>
                                Contenu de la recherche
                                <ul>
                                    <li>Sommaire</li>
                                    <li>Article</li>
                                </ul>
                            </li>
                            <li>
                            	Zone de recherche sur Wiktionnaire
                            </li>
                            <li>
                            	Menu du site
                            </li>
                        </ul>
                        Nous coderons dans cet ordre pour un accès plus rapide à l'information recherchée.
                    </p>
                    <h3>Sommaire</h3>
                    <p>
                    	Sur le site de wiktionnaire, le sommaire a la forme suivante : <br/>
                        &lt;ul&gt;<br />
                        &nbsp;&lt;li&gt;1 Français&lt;&frasl;li&gt;<br />
                        &nbsp;&lt;li&gt;2 Espagnol&lt;&frasl;li&gt;<br />
                        &nbsp;&lt;li&gt;3 Occitan&lt;&frasl;li&gt;<br />
                        &lt;&frasl;ul&gt;<br />
                        La numérotation des élément de la liste ul se fait dans le texte du noeud, ce qui peut gêner la lecture par synthèse vocale. Cette numérotation doit se faire via l'utilisation de la balise &lt;ol&gt;.
                    </p>
                    <h3>Liens</h3>
                    <p>
                    	De même que pour Wikipédia, wicktionnaire compte énormément de liens dans une même phrase. Ce qui peut gêner l'utilisateur de lecteur d'écran dans son écoute, et parfois même déformer le sens de la phrase.<br/><br/>
                        Exemple : <br/>
                        Dans la définition du mot libre nous avons la phrase suivante : <br/>
                        Qui n’est pas <a href="http://fr.wiktionary.org/wiki/engagé">engagé</a> dans une <a href="http://fr.wiktionary.org/wiki/passion">passion</a> <a href="http://fr.wiktionary.org/wiki/amoureuse">amoureuse</a> ou par les liens du <a href="http://fr.wiktionary.org/wiki/mariage">mariage</a>.<br/>
                        Le lecteur d'écran NVDA nous lis : Qui n’est pas lien engagé dans une lien passion lien amoureuse ou par les liens du lien mariage. <br/><br/>
                        Il faut savoir que dans le système de wikipédia, c'est le publieur de l'article qui décide des liens qui apparaitront. Ceci entraine parfois des liens inutiles et hors contexte mais la crédibilité des liens est un point sur lequel nous ne pouvons agir. L'idée n'est surtout pas de supprimer ces liens mais de les déplacer de manière à avoir une lecture continue de la phrase par la synthèse vocale. Nous les positionnerons en fin de paragraphe.<br/><br/>
                        Exemple : <br/>
                        Qui n’est pas engagé dans une passion amoureuse ou par les liens du mariage. <br/><br/>
                        Liens référencés : 
                        <ul>
                        	<li><a href="http://fr.wiktionary.org/wiki/engagé">engagé</a></li>
                            <li><a href="http://fr.wiktionary.org/wiki/passion">passion</a></li>
                            <li><a href="http://fr.wiktionary.org/wiki/amoureuse">amoureuse</a></li>
                            <li><a href="http://fr.wiktionary.org/wiki/mariage">mariage</a></li>
                        </ul>
                    </p>
                    <h3>&Eacute;léments spécifiques</h3>
                    <p>
                    	Dans la définition d'un mot, la consigne de wikipédia est de fournir à la suite de chaque définition un exemple d'utilisation du mot (une citation ou une phrase explicite). Cette information nous est transmise uniquement par la forme que prend le texte (en italique, texte en retrait par rapport à la définition).<br />
                        Par exemple dans la page précedente nous avions comme définition : <br/><br/>
                        Qui ne subit aucune contrainte dans ses actes, ses paroles, etc. <br/>
                        <ul>
                            <li><i>On n’est libre que dans la solitude. </i></li>
                        </ul>
                        Le lecteur d'écran nous lis linéairement cette définition et l'exemple apparait comme faisant partie de la définition.<br/>
                        On pourrait ici expliciter cette indication de manière sonore : <br/><br/>
                        Qui ne subit aucune contrainte dans ses actes, ses paroles, etc.<br/>
                        Exemples : 
                        <ul>
                            <li><i>On n’est libre que dans la solitude. </i></li>
                        </ul>
                    </p>
                </p>
                <h2>Structure de Wikinews</h2>
                <p>
                	 <a name="partie2_4"></a>
                </p>
            </p>
            <br/>
            <a href="#sommaire">[retour au sommaire]</a>
            <h1>Moyens</h1>
            <p>
            	<a name="partie3"></a>
            </p>
    	</div>
    </div>
    
    <p>
 		<a href="http://validator.w3.org/check?uri=http://users.polytech.unice.fr/~strombon/DEVINT2010/Projet4G2/specifications.html">
    		<img src="images/valid-xhtml10-blue.png" alt="Valid XHTML 1.0 Transitional" height="31" width="88" />
    	</a>
    	<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://users.polytech.unice.fr/~strombon/DEVINT2010/Projet4G2/css/base.css">
    		<img style="border:0;width:88px;height:31px" src="images/valid-css-blue.gif" alt="CSS Valide !" />
		</a>
	</p>
</body>
</html>
